<template>
  <div class="waf-management">
    <!-- 查询表单 -->
    <el-form class="demo-form-inline" ref="formRef" :model="queryForm" label-width="100px" size="small" inline>
      <el-form-item label="站点名称" prop="siteName">
        <el-input v-model="queryForm.siteName" placeholder="站点名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
          <el-option label="启用" value="启用"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchSites">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh" @click="resetData">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-setting" plain size="small" @click="autoConfigure">自动配置防护站点</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="el-row">
      <el-button type="success" icon="el-icon-plus" plain size="small" @click="handleAdd">新增站点</el-button>
      <el-button type="danger" icon="el-icon-delete" plain size="small" @click="handleBatchDelete" :disabled="selectedRows.length === 0">批量删除</el-button>
    </div>

    <!-- 站点列表 -->
    <el-table
        :data="tableData"
        height="100%"
        style="width: 100%; "
        @selection-change="handleSelectionChange"
        v-loading="loading"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="siteName" label="站点名称"></el-table-column>
      <el-table-column prop="domain" label="域名"></el-table-column>
      <el-table-column prop="protocol" label="协议"></el-table-column>
      <el-table-column prop="port" label="端口"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        style="text-align: right"
    ></el-pagination>

    <!-- 新增/编辑站点对话框 -->
    <SiteEditor
        :visible.sync="dialogVisible"
        :dialogTitle="dialogTitle"
        :formData="form"
        @submit="handleSubmit"
    />

    <!-- 查看详情对话框 -->
    <SiteDetail
        :visible.sync="detailDialogVisible"
        :siteDetails="selectedSiteDetails"
        @close="detailDialogVisible = false"
    />
  </div>
</template>

<script>
import SiteEditor from './components/SiteEditor.vue';
import SiteDetail from './components/SiteDetail.vue';

export default {
  name: "WafManagement",
  components: {
    SiteEditor,
    SiteDetail
  },
  data() {
    return {
      queryForm: {
        siteName: "",
        status: ''
      },
      totalTableData: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      dialogTitle: "",
      form: {},
      selectedRows: [],
      loading: true,
      policyDialogVisible: false,
      detailDialogVisible: false,
      selectedSiteId: null,
      selectedSiteDetails: {}
    };
  },
  methods: {
    fetchSites() {
      this.loading = true;
      setTimeout(() => {
        const {siteName, status} = this.queryForm;
        const filteredData = this.totalTableData.filter(item => {
          return (
              (!siteName || item.siteName.includes(siteName)) &&
              (!status || item.status === status)
          );
        });
        this.total = filteredData.length;
        this.tableData = filteredData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        this.loading = false;
      }, 1000);
    },
    resetData() {
      this.$refs.formRef.resetFields();
      this.fetchSites();
    },
    handleAdd() {
      this.dialogTitle = "新增站点";
      this.form = {};
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogTitle = "编辑站点";
      this.form = {...row};
      this.dialogVisible = true;
    },
    handleDetail(row) {
      this.selectedSiteId = row.id;
      this.selectedSiteDetails = {...row}; // 将选中的站点详细信息传递给详情对话框
      this.detailDialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该站点信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.tableData.indexOf(row);
        if (index > -1) {
          this.tableData.splice(index, 1);
        }
        this.totalTableData = this.totalTableData.filter(s => s.id !== row.id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchSites();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchSites();
    },
    handleSubmit(formData) {
      if (this.dialogTitle === "新增站点") {
        formData.id = this.totalTableData.length ? this.totalTableData[this.totalTableData.length - 1].id + 1 : 1;
        this.totalTableData.unshift({...formData});
        this.tableData.unshift({...formData});
      } else {
        const index = this.tableData.findIndex(row => row.id === formData.id);
        if (index > -1) {
          this.$set(this.tableData, index, {...formData});
        }
      }
      this.dialogVisible = false;
    },
    handleBatchDelete() {
      if (this.selectedRows.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的站点信息!'
        });
        return;
      }
      this.$confirm('此操作将永久删除选中的站点信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.selectedRows.forEach(row => {
          const index = this.tableData.indexOf(row);
          if (index > -1) {
            this.tableData.splice(index, 1);
          }
          this.totalTableData = this.totalTableData.filter(s => s.id !== row.id);
        });
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    autoConfigure() {
      // 自动配置逻辑可以根据实际需求实现
      this.$message({
        type: 'success',
        message: '自动配置完成!'
      });
    }
  },
  mounted() {
    this.totalTableData = [
      { id: 1, siteName: '站点A', domain: 'example.com', protocol: 'https', port: 443, status: '启用' },
      { id: 2, siteName: '站点B', domain: 'test.com', protocol: 'http', port: 80, status: '禁用' }
    ];
    this.fetchSites();
  }
};
</script>

<style scoped lang="scss">
.waf-management {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;

  .el-row {
    margin-bottom: 20px;
  }

  .el-table {
    flex: 1;
    margin-bottom: 20px;
  }
}
</style>
